import React, { useState, useRef } from 'react';
import { Button } from 'antd';
import { useSpring, useSprings, animated } from 'react-spring';
import styles from './index.less';

const Example1: React.FC<{}> = (props) => {
  const [toggle, setToggle] = useState(true);
  const opacityProps = useSpring({ opacity: toggle ? 1 : 0 });

  const listEL = useRef(null)

  // const springs = useSprings(10, items.map(item => ({ opacity: item.opacity }))

  const handleShowListEL = () => {
    console.log(listEL)
  }

  return (
    <div>
      <animated.div
        className={styles.toolDiv}
        style={opacityProps}
        children={(
          <>
            巴拉巴拉一大坨
            <span>children</span>
          </>
        )}
      />
      <animated.div
        className={styles.toolDiv}
        style={opacityProps}
      >
        <span>巴拉巴拉又是一大坨</span>
      </animated.div>
      <Button onClick={() => setToggle(!toggle)}>切换</Button>

      <hr />

      <ul ref={listEL}>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
      </ul>

      <Button onClick={handleShowListEL}>打印</Button>
    </div>
  )
}

export default Example1